<!--
 * @Author: vera_min vera_min@163.com
 * @Date: 2024-12-26 09:24:19
 * @LastEditors: vera_min vera_min@163.com
 * @LastEditTime: 2025-02-09 11:53:29
 * @FilePath: /mail-project/src/components/folder/components/folderItem.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="menu">
        <div class="menu-item-title">
            <div @click.stop="moveEmailToFolder()" :class="{'is-active': isActive()}" class="folder-title buttons hand" style="padding-left: 15px;">
                <i class="iconfont icon-caret-down" />
                <span>{{ folderItem.folderName }}</span>
                <span style="color: #f73131;" v-if="folderItem.enName === 'inbox' && unreadNum">（{{ unreadNum }}）</span>
            </div>
            <template v-for="(menu, menuIndex) in folderItem.children" :key="menuIndex">
                <div  @click.stop="moveEmailToFolder(menu)" :class="{'is-active': isActivLabel(menu)}" v-if="!menu.children || !menu.children.length" class="module hand">
                    <div class="buttons folder-sub-title" style="padding-left: 30px;">
                        <div>
                            <span>{{ menu.folderName }}</span>
                        </div>
                    </div>
                </div>
                <template v-else>
                    <div class="pl-15">
                        <FolderItem @subHandleMove="subHandleMove" :parentItemAccount="parentItemAccount" :folderItem="menu" />
                    </div>
                </template>
            </template>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { defineAsyncComponent } from 'vue';
import { useEmail } from '/@/stores/email';
import pinia from '/@/stores/index';
import { storeToRefs } from 'pinia';

const FolderItem = defineAsyncComponent(() => import('./folderItem.vue'));

const stores = useEmail(pinia);
const { curAccount, curFolder } = storeToRefs(stores);

// 定义父组件传过来的值
const props = defineProps({
	folderItem: {
		type: Object,
		default: () => { }
	},
  unreadNum: {
		type: Number,
		default: () => 0
	},
  parentItemAccount: {
		type: String,
		default: () => ''
	},
});

const emit = defineEmits(['onClick', 'subHandleMove']);

const moveEmailToFolder = (menu?:any) => {
    let params = {
        account: props.parentItemAccount,
        sourceFolderName: curFolder.value,
        targetFolderName: menu ? menu.folderName : props.folderItem.folderName,
    };
    emit('subHandleMove', params);
}

const subHandleMove = (params: any) => {
  emit('subHandleMove', params);
}

const isActivLabel = (menu:any) => {
  let folderName = curFolder.value;
  if(folderName === 'INBOX') {
    folderName = '收件箱'
  }
  return folderName === menu.folderName && props.parentItemAccount === curAccount.value;
}

const isActive = () => {
  let folderName = curFolder.value;
  return folderName === props.folderItem.folderName && props.parentItemAccount === curAccount.value;
}
</script>

<style lang="scss" scoped>
  .menu {
      width: 100%;
      font-size:12px;
      display: flex;
      justify-content: center;
      align-items: flex-start;
  }
  .menu-item-title {
    width: 100%;
    position: relative;
    .arrow {
      display: flex;
      align-items: center;
      width: 15px;
      height: 100%;
      border-left: 1px solid rgb(255 255 255 / 0%);
    }

    &::after {
      position: absolute;
      top: 28px;
      left: 0;
      width: 100%;
      height: 2px;
      content: "";
    }

    .child, .menu-item-child {
      position: absolute;
      top: 15px;
      right: -30px;
      z-index: 2024;
      width: 120px;
      background-color: #fff;
      box-shadow: 0 0 6px #7d93a8;

      .childRow {
        position: relative;
        width: 100%;
        font-size: 12px;
        border-bottom: 1px solid #dbe2e8;

        .childLabel {
          width: 60%;
          height: 25px;
          margin: auto;
          line-height: 25px;
        }

        .logo {
          position: absolute;
          top: 0;
          bottom: 0;
          left: 5px;
          margin: auto;
        }

        &:hover {
          color: #fff;
          background: linear-gradient(#7d93a8, #6d7e8e);
        }
      }
    }
      .folder-title:hover,
      .folder-sub-title:hover {
          color: #fff;
          background: linear-gradient(#7d93a8, #6d7e8e);
      }
  }
  .menu-item-title:hover {
    .menu-item-child{
      display: initial;
    }
  }

  .buttons {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
    padding-right: 3px;
    font-size: 12px;
    width: 100%;
    height: 30px;

    & > span {
      margin-left: 3px;
    }
  }
  :deep(.pl-15) {
    .folder-title {
        padding-left: 30px!important;
    }
    .folder-sub-title {
        padding-left: 45px!important;
    }
  }
  .is-active {
    color: #fff;
    background: linear-gradient(#7d93a8, #6d7e8e);
  }
</style>